{% extends "base.html" %}

{% block content %}
<div class="container mt-4">
  <!-- 页面标题和保存按钮 -->
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h2>系统设置</h2>
    <button class="btn btn-primary" id="saveSettings">
      <i class="fa fa-save me-1"></i>保存设置
    </button>
  </div>

  <!-- 语言设置卡片 -->
  <div class="card mb-4">
    <div class="card-header">
      <h5 class="mb-0"><i class="fa fa-language me-2"></i>语言设置</h5>
    </div>
    <div class="card-body">
      <select class="form-select" id="languageSelect">
        <option value="zh-CN" selected>简体中文</option>
        <option value="zh-TW">繁体中文</option>
        <option value="en">English</option>
        <option value="ja">日本語</option>
        <option value="ko">한국어</option>
      </select>
      <p class="mt-3 text-muted">语言设置将影响整个系统的显示语言，更改后需要刷新页面生效</p>
    </div>
  </div>

  <!-- 个人信息设置卡片 -->
  <div class="card mb-4">
    <div class="card-header">
      <h5 class="mb-0"><i class="fa fa-user-circle-o me-2"></i>个人信息</h5>
    </div>
    <div class="card-body">
      <form id="profileForm">
        <div class="row mb-3">
          <label for="username" class="col-sm-2 col-form-label">用户名</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="username" value="{{ current_user.username if current_user else '周佳伟' }}" readonly>
          </div>
        </div>

        <div class="row mb-3">
          <label for="email" class="col-sm-2 col-form-label">邮箱</label>
          <div class="col-sm-10">
            <input type="email" class="form-control" id="email" value="{{ current_user.email if current_user else '' }}" placeholder="请输入邮箱">
          </div>
        </div>

        <div class="row mb-3">
          <label for="phone" class="col-sm-2 col-form-label">手机号</label>
          <div class="col-sm-10">
            <input type="tel" class="form-control" id="phone" placeholder="请输入手机号">
          </div>
        </div>

        <div class="row mb-3">
          <label for="avatar" class="col-sm-2 col-form-label">头像</label>
          <div class="col-sm-10">
            <input type="file" class="form-control" id="avatar" accept="image/*">
            <div class="mt-2">
              <img src="{{ current_user.avatar_url if current_user else 'https://gips3.baidu.com/it/u=1761823962,2099797246&fm=3074&app=3074&f=PNG?w=2048&h=2048' }}"
                   class="rounded-circle" width="80" height="80" alt="当前头像">
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>

  <!-- 安全设置卡片 -->
  <div class="card mb-4">
    <div class="card-header">
      <h5 class="mb-0"><i class="fa fa-lock me-2"></i>安全设置</h5>
    </div>
    <div class="card-body">
      <form id="securityForm">
        <div class="row mb-3">
          <label for="oldPassword" class="col-sm-2 col-form-label">当前密码</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="oldPassword" placeholder="请输入当前密码">
          </div>
        </div>

        <div class="row mb-3">
          <label for="newPassword" class="col-sm-2 col-form-label">新密码</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="newPassword" placeholder="请输入新密码（至少8位）">
            <div class="form-text">密码应包含大小写字母、数字和特殊符号</div>
          </div>
        </div>

        <div class="row mb-3">
          <label for="confirmPassword" class="col-sm-2 col-form-label">确认密码</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="confirmPassword" placeholder="请再次输入新密码">
          </div>
        </div>

        <div class="row mb-3">
          <label class="col-sm-2 col-form-label">二次验证</label>
          <div class="col-sm-10 d-flex align-items-center">
            <input type="checkbox" class="form-check-input me-2" id="twoFactorAuth">
            <label class="form-check-label" for="twoFactorAuth">启用邮箱二次验证</label>
          </div>
        </div>
      </form>
    </div>
  </div>

  <!-- 通知设置卡片 -->
  <div class="card">
    <div class="card-header">
      <h5 class="mb-0"><i class="fa fa-bell-o me-2"></i>通知设置</h5>
    </div>
    <div class="card-body">
      <form id="notificationForm">
        <div class="row mb-3">
          <label class="col-sm-2 col-form-label">订单通知</label>
          <div class="col-sm-10 d-flex align-items-center">
            <input type="checkbox" class="form-check-input me-2" id="orderNotify" checked>
            <label class="form-check-label" for="orderNotify">接收新订单通知</label>
          </div>
        </div>

        <div class="row mb-3">
          <label class="col-sm-2 col-form-label">系统更新</label>
          <div class="col-sm-10 d-flex align-items-center">
            <input type="checkbox" class="form-check-input me-2" id="systemUpdate" checked>
            <label class="form-check-label" for="systemUpdate">接收系统更新通知</label>
          </div>
        </div>

        <div class="row mb-3">
          <label class="col-sm-2 col-form-label">营销活动</label>
          <div class="col-sm-10 d-flex align-items-center">
            <input type="checkbox" class="form-check-input me-2" id="marketing">
            <label class="form-check-label" for="marketing">接收营销活动通知</label>
          </div>
        </div>

        <div class="row mb-3">
          <label for="notifyMethod" class="col-sm-2 col-form-label">通知方式</label>
          <div class="col-sm-10">
            <select class="form-select" id="notifyMethod">
              <option value="email" selected>邮箱通知</option>
              <option value="sms">短信通知</option>
              <option value="both">邮箱+短信</option>
            </select>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  // 保存设置按钮点击事件
  document.getElementById('saveSettings').addEventListener('click', function() {
    // 这里可以添加表单验证和数据提交逻辑
    const Toast = bootstrap.Toast.getOrCreateInstance(document.getElementById('settingToast'));
    Toast.show();
  });
</script>

<!-- 成功提示组件 -->
<div class="toast position-fixed bottom-5 end-5" id="settingToast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header bg-success text-white">
    <strong class="me-auto">设置已保存</strong>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    您的设置已成功保存并生效
  </div>
</div>
{% endblock %}